<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	/*
	 (1)作为节点数的文档:以下6个方法连元素节点也算一个节点
	    1、parentNode       获取该节点的父节点    
	    2、childNodes       获取该节点的子节点数组
	    3、firstChild       获取该节点的第一个子节点
	    4、lastChild        获取该节点的最后一个子节点
	    5、nextSibling      获取该节点的下一个兄弟元素
	    6、previoursSibling 获取该节点的上一个兄弟元素
	    7、nodeType         节点的类型，9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点
	    8、nodeVlue         Text节点或Comment节点的文本内容
	    9、nodeName         元素的标签名(如P,SPAN,#text(文本节点),DIV)，以大写形式表示
	*/
	window.onload = function() {
		//根据class获取节点
		var node1 = document.querySelector(".class2");
		//输出：<p id="p1" class="class1">我是第一个P</p><p id="p2" class="class2">我是第二个P</p>
		console.log(node1.parentNode.innerHTML);
		
		var node2 = document.querySelector("#div1");
		var children = node2.childNodes;
		//!!!!!!特别注意
		console.log(children.length);  //输出5,因为包含前后两个以及两个<p>中间的空文本节点
		
		for(var i=0; i<children.length; i++) {
			if(children[i].nodeType==1) {
				console.log(children[i].innerHTML);
			}else if(children[i].nodeType==3) {
				console.log(children[i].nodeValue);
			}
		}
	}
</script>
</head>
<body>
	<div id="div1">
		<p id="p1" class="class1">我是第一个P</p>
		<p id="p2" class="class2">我是第二个P</p>
	</div>
</body>
</html>